<template>
	<view class="uni-section">
		<view class="uni-section-header" nvue>
			<view v-if="type" class="uni-section__head">
				<view :class="type" class="uni-section__head-tag" />
			</view>
			<view class="uni-section__content">
				<text :class="{'distraction': !subTitle}" :style="{color:color}" class="uni-section__content-title">{{title}}</text>
				<text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>
			</view>
		</view>
		<view :style="{padding: padding ? '10px' : ''}">
			<slot />
		</view>
	</view>
</template>

<script setup>
import {watch} from 'vue'

const emits = defineEmits(['click'])
const props = defineProps({
	type: {
		type: String,
		default: ''
	},
	title: {
		type: String,
		default: ''
	},
	color:{
		type: String,
		default: '#333'
	},
	subTitle: {
		type: String,
		default: ''
	},
	padding: {
		type: Boolean,
		default: false
	}
})

watch(() => props.title, newTitle => {
	if (uni.report && newTitle !== '') {
		uni.report('title', newTitle)
	}
})

function onClick() {
	emits('click')
}
</script>

<style lang="scss">
@import '@/styles/var.scss';
@import '@/styles/mixin.scss';
		
.uni-section {
	background-color: $bg-p;
	margin-top: 10px;
}
.uni-section-header {
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	padding: 12px 10px;
	font-weight: normal;
}
.uni-section__head {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
}

.line {
	@include wh(4px, 12px);
	@include borderRadius(10px);
	background-color: $font-color-p;
}

.circle {
	@include wh(8px, 8px);
	border-top-right-radius: 50px;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	background-color: $font-color-p;
}

.uni-section__content {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	flex: 1;
	color: #333;
}

.uni-section__content-title {
	@include sc(14px, $font-color-p);
}

.distraction {
	flex-direction: row;
	align-items: center;
}

.uni-section__content-sub {
	@include sc(12px, $font-color-ll);
	line-height: 16px;
	margin-top: 2px;
}
</style>